<template>
	<div>
		<Row style="height: auto;">
			<Col span="4" style="height: 80px;padding-top: 10px;">
				<div class="classroom_tab" style="position: relative;left: 50%;margin-left: -50px;">
					<p class="classroom_name">{{data.name}}</p>
					<Button type="info" @click="delFn(data.id,'flood')" icon="close"></Button>
				</div>
			</Col>
			<Col span="20" style="position: relative;min-height: 80px;height: auto;padding: 10px;border-left: 1px solid rgb(227,232,238)">
				<div v-for="(classroom,clrIndex) in data.children" class="classroom_tab" key="clrIndex">
					<p v-show="classroom.isEdit" class="classroom_name">{{classroom.name}}</p>
					<Input @input="inputFn" :value="classroom.name" v-show="!classroom.isEdit" ref="classroom" class="classroom_input" type="text"></Input>
					<Button type="info" @click="editClassRoom(clrIndex,classroom.isEdit)" :icon="classroom.icon"></Button>
					<Button type="info" @click="delFn(classroom.id,'classroom')" icon="close"></Button>
				</div>
			</Col>
		</Row>
	</div>
</template>

<script>
	export default {
		props: {
			data: Object
		},
		data() {
			return {
				interim:""
			}
		},
		methods: {
			inputFn(){
				this.interim = event.target.value
			},
			editClassRoom(index, state) {
				if(state==false){
					Object.assign(this.data.children[index], {
						isEdit: true,
						icon: "edit"
					});
					if(this.interim==""){
						this.data.children[index].name = this.$refs.classroom[index].value
					}else{
						this.data.children[index].name = this.interim
					}
					this.updateClassRoom(this.data.children[index].id,this.data.children[index].name)
				}else{
					Object.assign(this.data.children[index], {
						isEdit: false,
						icon: "checkmark"
					});
				}
			},
			updateClassRoom(id,name) {
				this.$emit("update", {id,name})
			},
			delFn(id,type) {
				this.$emit("delete", {id,type})
			},
		}
	}
</script>

<style>
	.classroom_tab {
		float: left;
		height: 36px;
		max-width: auto;
		margin: 10px 10px;
		background: rgb(214,229,242);
		overflow: hidden;
		padding: 2px 5px;
	}
	.classroom_name{
		width: auto;
		height: 100%;
		line-height: 36px;
		text-align: center;
		float: left;
		font-size:18px;
		margin: 0 20px;
	}
	.classroom_input {
		width: 120px;
		height: 100%;
		float: left;
		box-shadow: none;
		text-align: center;
		background: none;
	}
	.classroom_tab .ivu-btn {
		width: 24px;
		height: 24px;
		margin-top: 4px;
		margin-left: 5px;
		box-shadow: none;
		border-radius:0;
		background: none;
		border: none;
		padding: 0;
	}
	.flood_name .ivu-btn i,.classroom_tab .ivu-btn i{
		width: 100%;
		height: 100%;
		font-size: 10px;
		line-height: 24px;
		background: rgb(139,179,213);
	}
</style>